<template>
  <div class="addpermission">
    <el-dialog
      :title="showtitle"
      :visible="dialogFormVisible"
      @close="btnCancel"
    >
      <!-- 表单 -->
      <el-form
        ref="addpermissionsForm"
        :model="addpermissionsForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="title">
          <el-input
            v-model="addpermissionsForm.title"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>

        <el-form-item label="权限分配">
          <el-row type="flex" justify="center">
            <el-col slot="label"> 权限分配 </el-col>
            <el-col>
              <el-tree
                ref="tree"
                :data="data"
                show-checkbox
                node-key="id"
                :props="defaultProps"
                :default-checked-keys="defaultCheck"
                @check="getCheckedData"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" class="btnOk" @click="btnOk">确定</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getmenuslist } from '@/api/base/menus'
import { addpermissions, editpermissions } from '@/api/base/permissions'
export default {
  name: 'AddPremission',
  props: {
    currentrow: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      addpermissionsForm: {
        title: '',
        permissions: []
      },
      rules: {
        title: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      },
      data: [], // 树形数据
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      defaultCheck: [] // 勾选的节点数组
    }
  },
  computed: {
    showtitle() {
      return this.currentrow.id ? '编辑权限组' : '新增权限组'
    }
  },
  mounted() {},
  created() {
    this.getmenuslist()
  },
  methods: {
    // 表单渲染
    async getmenuslist() {
      const { data } = await getmenuslist()

      // this.data = data
      this.data = JSON.parse(JSON.stringify(data).replace(/points/g, 'childs'))
    },
    // 获取节点数据
    getCheckedData(nodeObj, selectedObj) {
      console.log(selectedObj.checkedKeys)
      this.addpermissionsForm.permissions = selectedObj.checkedKeys
    },
    // 设置节点勾选

    async btnOk() {
      try {
        await this.$refs.addpermissionsForm.validate()
        if (this.currentrow.id) {
          await editpermissions({
            id: this.currentrow.id,
            ...this.addpermissionsForm
          })
        } else {
          await addpermissions(this.addpermissionsForm)
        }

        this.$message.success('操作成功')
        this.$emit('updata')
        this.addpermissionsForm = {}
        this.$refs.tree.setCheckedKeys([])
        this.defaultCheck = []
        this.$refs.addpermissionsForm.resetFields()
        this.dialogFormVisible = false
      } catch (error) {
        console.log(error)
      }
    },
    // 取消
    btnCancel() {
      this.addpermissionsForm = {}
      this.$refs.tree.setCheckedKeys([])
      this.defaultCheck = []
      this.dialogFormVisible = false
      this.$refs.addpermissionsForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.addpermission {
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8vh !important;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      .el-form-item__label {
        width: 230px !important;
      }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}
</style>
